<template>
  <ul class="product--navbar">
    <li
      v-for="(item, index) in list"
      :key="index"
      class="item"
      :class="{ active: index === active }"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data: () => ({
    active: 0,
    list: ["肾行", "无癎道", "互联网医院", "单病种数据管理平台", "智能转诊平台"]
  })
};
</script>

<style lang="less" scoped>
.product--navbar {
  font-size: 30px;
  list-style: none;
  display: flex;
  border-bottom: 1px solid #d8d8d8;
  margin: 0;
  padding: 0;
  .item {
    flex: 1;
    text-align: center;
    height: 196px;
    line-height: 196px;
    cursor: pointer;
    &.active {
      position: relative;
      color: @primary;
      &::after {
        display: block;
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 4px;
        background: @primary;
      }
    }
  }
}
</style>
